<template>
  <div>
    <h2>HelloWorld</h2>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
}
</script>

<style scoped>
/* 单文件中的样式设置 如果想要其只在当前页面使用样式需要使用 scoped控制样式只在当前组件中生效*/
/* 其原理就是在所有组件中添加一个唯一的属性,在设置样式时,会同时使用[]属性选择器选择这个属性 */
/* 感觉原理就是在组件的虚拟节点对象的attr数组中通过unshift(因为添加两个的话后添加的会在后面)头部添加一个单一属性,然后在渲染时就会有这个属性了 */
/* 这个属性会给当前组件所有的标签全部添加,包括组件的自定义标签的根组件,而且会在所有的选择器后面都添加一个属性选择器 */
/* div h2 a ===> div:[属性] h2:[属性] a:[属性]  */
/* 如果需要在使用向下的选择器,例如在当前组件中想向下选择一个组件中的标签时就会失效,因为其在创建选择器时会在所有的选择器中全部添加唯一属性,但是唯一属性
    添加时,只会添加到子组件的根组件,等到选择时就不会选择到子组件中的标签
    像这种情况就直接使用深度选择器>>>解决
    // 后面使用到其他css扩展语言时,使用::v-deep 来解决绝大部分的穿透问题
*/
h2 {
  background-color: red;
}
</style>
